<template>
    <div
    id="corporateInformation"
    class="container">
        <!-- <app-header-nav
        @sliderClick="sliderClick"
        :navTab="navTab" /> -->
        <div
        class="nav_child"
        v-if="!$util.isEmpty(introductionData)">
        <div class="intro_content" >
        <template v-if="!$util.isEmpty(profile)">
        <!-- <div
          class="introduce_img"
          id="profile">
          <img
            :src="profile.profile_images?profile.profile_images:`${constant.imgUrl}common/default_tit_img.png`"
            alt="">
        </div> -->
        <p
          class="intro_title"
          v-if="profile.profile_desc">企业介绍</p>
        <p
          class="p_describe desc_first">{{profile.profile_desc?profile.profile_desc:'暂无内容' }}</p>
        <p class="intro_title">营业时间</p>
        <p class="p_describe">{{profile.business_hours?profile.business_hours:'暂无内容' }}</p>
        <p class="intro_title">服务范围</p>
        <p class="p_describe">{{ profile.city_name?profile.city_name:'暂无内容' }}</p>
        <p class="intro_title" >装修服务</p>
        <p class="p_describe">{{ featureService?featureService:'暂无内容' }}</p>

      </template>
      <div class="record_list">
        <p
          class="intro_title"
          id="course">企业历程</p>
        <ul>
          <template v-if="!$util.isEmpty(course)">
            <li
              class="record_wrap"
              v-for="(i, index) in course"
              :key="index"
            >
              <div class="record_top">
                <div class="record_type">{{ (i.addtime).slice(0, 4) + '-' + (i.addtime).slice(4) }}</div>
              </div>
              <div class="record_bottom">
                <p>{{ i.content }}</p>
              </div>
            </li>
          </template>
          <li
            class="noData record_wrap"
            v-else>暂无历程</li>
        </ul>
      </div>
    </div>
    <div class="line_tab"/>
    <div
      class="intro_content"
      id="certificate">

      <p class="intro_title">企业证书</p>
      <div
        class="swiper">
          <swiper
            class="swiper"
            circular
            :display-multiple-items="2"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration">
                  <swiper-item
                    class="swiper-item"
                    v-for="(i, index) in certificate"
                    :key="index"
                  >
                      <image
                        class="swiper-item_img"
                        :src="i.images"
                        />
                  </swiper-item>
                  <!-- <swiper-item>
                      <view class="swiper-item">B</view>
                  </swiper-item>
                  <swiper-item>
                      <view class="swiper-item">C</view>
                  </swiper-item> -->
              </swiper>
        <!-- <template v-if="!$util.isEmpty(swiperWithd)">
          <van-swipe
            :show-indicators="false"
            :width="swiperWithd"
          >
            <template v-if="!$util.isEmpty(certificate)">
              <van-swipe-item
                v-for="(i, index) in certificate"
                :key="index"
              >
                <img
                  alt=""
                  v-lazy="i.images">
              </van-swipe-item>
            </template>
            <template v-else>
              <van-swipe-item
              >
                <img
                  :src="require(`${$constant.imgUrl}common/default_tit_img.png`)"
                  alt="">
              </van-swipe-item>
            </template>
          </van-swipe>
        </template> -->

      </div>
      <p
        class="intro_title"
        v-if="profile.team_desc!==''">团队介绍</p>
      <p
        class="p_describe desc_first"
        v-if="profile.team_desc!==''">{{ profile.team_desc?profile.team_desc:'暂无内容' }}</p>
      <div
        class="introduce_img team_img"
        v-if="profile.team_images!==''">
        <img
          :src="profile.team_images?profile.team_images:`${constant.imgUrl}common/default_tit_img.png`"
          alt="">
      </div>
    </div>
    <div class="line_tab"/>
    <div
      class="intro_content"
      id="news" >
      <p class="intro_title tomore">企业动态
        <navigator
          :url="`/pages/company/newsList?owner_user_id=${query.owner_user_id}`"
          class="morethings">更多</navigator>
      </p>
      <ul
        class="dynamic"
        v-if="!$util.isEmpty(news)">
        <li
          @click="goNews(i)"
          v-for="(i, index) in news"
          :key="index">
          <div class="dynamic_img">
            <img
              alt=""
              v-lazy="i.images">
          </div>
          <p>{{ i.title }}</p>
        </li>
      </ul>
      <div
        v-else
        class="noData">
        暂无动态
      </div>
      <p
        class="intro_title"
        id="brand">合作品牌</p>
      <ul
        class="brand"
        v-if="!$util.isEmpty(brand)">
        <li
          v-for="(i, index) in brand"
          :key="index">
          <img
            :src="i.images"
            alt="品牌合作">
        </li>
      </ul>
      <div
        v-else
        class="noData">
        暂无合作
      </div>
    </div>
    <div
      class="intro_content"
      id="job">
      <p class="intro_title tomore">企业招聘
        <navigator
          :url="`/pages/company/jobList?owner_user_id=${query.owner_user_id}&address=${profile.full_address}&phone=${profile.contact_phone}`"
          class="morethings">
          更多
        </navigator>
      </p>
      <ul
        class="recruit"
        v-if="!$util.isEmpty(job)">
        <li
          @click="jobDetail(i)"
          v-for="(i, index) in job"
          :key="index">
          <p class="recruit_position">{{ i.title }} <span>{{ i.salary }}</span> </p>
          <div class="position_experience">
            <div>
              {{ i.requirements }}
            </div>
            <div>
              | {{ i.numbers }}人
            </div>
          </div>
        </li>
      </ul>
      <div
        v-else
        class="noData">
        暂无招聘
      </div>
      <template v-if="!$util.isEmpty(profile)">
        <p class="intro_title">联系方式</p>
        <div class="company_addresss">
          <div class="address_left">
            <p class="main_p">公司地址</p>
            <p class="main_ci">{{ profile.full_address }}</p>
          </div>
          <div class="addres_right" @click="jumpMap">
            <img
              :src="`${constant.imgUrl}design/company/icon_nav.png`"
              alt=""
              class="contact_img">
          </div>
        </div>
        <div class="contact">
          <div class="address_left">
            <p class="main_p">联系电话</p>
            <p class="main_ci">{{ profile.contact_phone }}</p>
          </div>
          <div class="contact_way" @click="callPhone">
            <img
              :src="`${constant.imgUrl}design/telep.png`"
              alt=""
              class="contact_img">
          </div>
        </div>
      </template>
    </div>
    <footer class="introduce-footer">
      <conversation class="nav-introduce"/>
      <div class="back_main nav-introduce" @click="jumpIndex">
        <img
          :src="`${constant.imgUrl}design/shopse.png`"
          alt="">
        <span>公司主页</span>
      </div>
    </footer>
  </div>
    </div>
</template>

<script>
import AppHeaderNav from '@/components/App_header_nav'
import $apiCompany from '@/api/company'
import { mapGetters } from 'vuex'
import conversation from '@/pages/components/conversation'
export default {
	components: {
		AppHeaderNav,
		conversation
	},
	data() {
		return {
			introductionData: {},
			typeInt: [
				'course',
				'brand',
				'news',
				'job',
				'profile',
				'certificate'
			],
			constant: this.$constant,
			navTab: [
				{ text: '企业介绍', id: 'profile' },
				{ text: '历程', id: 'course' },
				{ text: '证书', id: 'certificate' },
				{ text: '动态', id: 'news' },
				{ text: '品牌', id: 'brand' },
				{ text: '招聘', id: 'job' }
			],
			scrollPrentTop: 0,
			query: null
		}
	},
	computed: {
		course() {
			if (!this.$util.isEmpty(this.introductionData)) {
				return this.$util.isEmpty(this.introductionData.course)
					? [] : this.introductionData.course.content
			}
		},
		profile() {
			if (!this.$util.isEmpty(this.introductionData)) {
				return this.$util.isEmpty(this.introductionData.profile)
					? [] : this.introductionData.profile.content[0]
			}
		},
		news() {
			if (!this.$util.isEmpty(this.introductionData)) {
				return this.$util.isEmpty(this.introductionData.news)
					? [] : this.introductionData.news.content
			}
		},
		job() {
			if (!this.$util.isEmpty(this.introductionData)) {
				return this.$util.isEmpty(this.introductionData.job)
					? [] : this.introductionData.job.content
			}
		},
		brand() {
			if (!this.$util.isEmpty(this.introductionData)) {
				return this.$util.isEmpty(this.introductionData.brand)
					? [] : this.introductionData.brand.content
			}
		},
		certificate() {
			if (!this.$util.isEmpty(this.introductionData)) {
				return this.$util.isEmpty(this.introductionData.certificate) ? [] : this.introductionData.certificate.content
			}
		},
		...mapGetters({ userInfo: 'getBasicUser' }),
		featureService() {
			if (!this.$util.isEmpty(this.userInfo)) {
				return this.userInfo.shop_tag_info.map(i => i.tag_name).join('、')
			}
			return ''
		}
	},
	onLoad(val) {
		this.query = val
	},
	mounted() {
		this.init()
	},
	onPageScroll(e) {
		this.scrollPrentTop = e.scrollTop
	},
	methods: {
		async init() {
			await $apiCompany.getCompanyAllInfo({
				company_id: this.query.owner_user_id
			}).then((res) => {
				if (res.status == 'success') {
					this.formatData(res.data)
				} else {
					// this.$toast(res.errors.message)
				}
			})
			// this.$nextTick(() => {
			// 	this.swiperWithd = this.$refs.swiper.clientWidth / 2
			// 	this.scrollTo()
			// })
		},
		formatData(data) {
			const obj = {}
			data.forEach((i) => {
				this.typeInt.forEach((s) => {
					if (i.config_type === s) {
						obj[s] = i
					}
				})
			})
			this.introductionData = obj
		},
		sliderClick(val) {
			this.scrollTo(val.id)
		},
		scrollTo(id) {
			let self = this
			const query = uni.createSelectorQuery().in(this)
			query.select(`#${id}`).boundingClientRect(data => {
				let scrollTop = data.top + self.scrollPrentTop
				uni.pageScrollTo({
					scrollTop: id === 'profile' ? 0 : scrollTop - 50,
					duration: 300
				})
			}).exec(data => {
				console.log(data)
			})
		},
		jobDetail(i) {
			let query = {
				id: i.id,
				address: this.profile.full_address,
				phone: this.profile.contact_phone,
				owner_user_id: this.userInfo.user_id
			}
			uni.navigateTo({
				url: `/pages/company/jobDetail${this.commonJS.queryData(query)}`
			})
		},
		goNews(i) {
			window.location.href = i.url
		},

		// 跳转到导航
		jumpMap() {
			uni.openLocation({
				latitude: this.userInfo.lat,
				longitude: this.userInfo.lng,
				name: this.userInfo.region_address || '',
				address: this.userInfo.full_address || ''
			})
		},
		// 跳转到首页
		jumpIndex() {
			let url = this.userInfo.role_id > 2 ? `/pages/design/designerIndex` : `/pages/design/designCompany/indexNew`
			uni.navigateTo({
				url: `${url}${this.commonJS.queryData(this.query)}`
			})
		},
		// 拨打电话
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.profile.contact_phone
			})
		}

	}
}
</script>

<style lang="scss" scoped>
    .swiper-item_img {
      width: 100%;
      height: 100%;
    }
    #corporateInformation {
        position: absolute;
        min-height: 100%;
        max-width: 750px; /*no*/
        min-width: 320px; /*no*/
        transition: all 0.5s ease;
        top: 0;
        left: 0;
        overflow-y: scroll;
    }
    .container {
        width: 100%;
        .nav {
            height: 90px;
            width: 100%;
            position: fixed;
            z-index: 9;
            background: #FFFFFF;
            border-bottom: 1px solid #dddddd;
            li {
                float: left;
                width: 12%;
                text-align: center;
                margin-left: 3%;
                font-size: 30px;
                color: #999999;
                line-height: 90px;
                position: relative;
            }
            li:first-child {
                width: 19%;
            }
            .navactive {
                font-size: 34px;
                color: #333333;
            }
            .navactive::after {
                content: "";
                display: block;
                position: absolute;
                bottom: 0;
                left: calc(52% - 0.4rem);
                width: 60px;
                height: 6px;
                border-radius: 2.5px;
                background-color: #ffd11a;
            }
        }
        .enterpricse_content {
            width: 100%;
            height: auto;
            top: 90px;
            z-index: 1;
            position: absolute;
        }
        .content_top{
            top:0;
        }
    }

     .noData {
        color: #999999;
        font-size:30px;
        font-weight:400;
        padding: 5px;
    }
    .nav_child {
        width: 100%;
        height: 100%;
        float: left;
        // padding-top: 30px;
        background: #FFFFFF;
        .intro_content {
            width: 90%;
            height: auto;
            background: #FFFFFF;
            margin-left: 5%;
            display: block;
            clear: both;
            .introduce_img {
                width: 100%;
                height: 390px;
                border-radius: 20px;
                border: 2px solid #666666;
                &.introduce_img img {
                    width: 100%;
                    height: 100%;
                    float: left;
                }
            }
            .team_img{
                margin: 30px 0;
            }
            .intro_title {
                font-size: 36px;
                color: #333333;
                margin-top: 60px;
                margin-bottom: 26px;
                .morethings{
                    float: right;
                    font-size: 24px;
                    color: #999999;
                    margin-right: 25px;
                }
            }
            .tomore{
                background: url($imgUrl + 'center/icon_right_arrow_large.png')
                right center / 15px 28px no-repeat;
                background-position-y: 3px;
            }
            .p_describe {
                color: #999999;
                line-height: 45px;
                font-size: 30px;
            }
            .desc_first {
                text-indent: 30px;
            }
            .record_list {
                margin-top: 40px;
                margin-left: 10px;
                ul {
                    border-left: 2px solid #ccc;
                }
                .record_wrap {
                    padding-left: 30px;
                    margin-bottom: 50px;
                    .record_top {
                        position: relative;
                        top: -10px;
                        display: flex;
                        align-items: center;
                        color: #666;
                        .record_type {
                            font-size: 30px;
                        }
                        & > div {
                            margin-right: 20px;
                        }
                    }
                    .record_top::before {
                        position: absolute;
                        left: -42px;
                        content: '';
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        border: 4px solid #fff;
                        border-radius: 50%;
                        background-color: #ccc;
                    }
                    .record_bottom {
                        /*background-color: #f5f5f5;*/
                        border-radius: 16px;
                        display: flex;
                        font-size: 24px;
                        color: #999999;
                        align-items: center;
                        .record_img {
                            width: 168px;
                            height: 130px;
                            margin-right: 20px;
                            img {
                                width: 100%;
                                height: 100%;
                                border-top-left-radius: 16px;
                                border-bottom-left-radius: 16px;
                            }
                        }
                        .attr_img {
                            width: 130px;
                        }
                        .record_bottom_main {
                            color: #333;
                            font-size: 30px;
                            margin-bottom: 10px;
                        }
                    }
                }
                .record_wrap:nth-child(1) {
                    .record_type {
                        color: #333333;
                    }
                    .record_top::before {
                        background-color: #cccccc;
                    }
                }
            }
            .swiper{
                height: 210px;
                .van-swipe{
                    height: 210px;
                }
                & .van-swipe-item{
                    box-sizing: border-box;
                    padding-right: 10px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .dynamic{
                width: 100%;
                height: auto;
                margin-top: 50px;
            }
            .dynamic li{
                width: 100%;
                height: 200px;
                margin-top: 30px;
                border-radius: 20px;
                background: #ffffff;
                box-shadow: 0px 1px 20px #cccccc;
                background: url($imgUrl + 'center/icon_right_arrow_large.png')
                right 20px center / 15px 28px no-repeat;
                .dynamic_img{
                    width: 140px;
                    height: 140px;
                    float: left;
                    margin: 30px;
                    img{
                        width: 100%;
                        height: 100%;
                        float: left;
                    }
                }
                p{
                    font-size: 34px;
                    margin-top: 58px;
                    line-height: 50px;
                    float: left;
                    width: 370px;
                    display: -webkit-box;
                    word-break: break-all;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                }
            }
            .brand{
                margin-top: 10px;
                width: 100%;
                height: auto;
                float: left;
                margin-bottom: 60px;
            }
            .brand li{
                width: 180px;
                height: 100px;
                float: left;
                margin-left: 20px;
                margin-top: 15px;
                img{
                    width: 100%;
                    height: 100%;
                    float: left;
                    border: 1px solid #cccccc;
                }
            }
            .brand li:nth-child(3n+1){
                margin-left: 0;
            }
            .recruit{
                width: 100%;
                height:auto;

            }
            .recruit li{
                box-sizing: border-box;
                width: 100%;
                height: 132px;
                border-radius: 20px;
                box-shadow: 0px 1px 20px #cccccc;
                margin-bottom: 20px;
                padding: 20px 20px 0;
                .recruit_position{
                    font-size: 30px;
                    line-height: 50px;
                    span{
                        float: right;
                        color: #ff6900;
                    }
                }
                .position_experience {
                    font-size: 24px;
                    color:#999999;
                    margin-top: 8px;
                    display: flex;
                    & > div{
                        &:nth-child(1){
                            max-width: 532px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin-right: 10px;

                        }
                        &:nth-child(2){
                                flex: 1;
                        }
                    }
                }
            }
            .company_addresss{
                width: 100%;
                height: 166px;
                border-radius: 20px;
                margin-bottom: 20px;
                box-shadow: 0px 1px 20px #cccccc;
                .address_left{
                    float: left;
                    margin: 30px 0 0 30px;
                    width: 50%;
                    p:nth-child(2){
                        margin-top: 10px;
                        display: -webkit-box;
                        word-break: break-all;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        /*! autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                    }
                }
                .addres_right{
                    float: right;
                    margin-top: 60px;
                    margin-right: 50px;
                    height: 50px;
                    width: 96px;
                    border-left: 1px solid #dddddd;
                }
            }
            .main_p{
                font-size: 30px;
                color: #333333;
                font-weight: bold;
            }
            .main_ci{
                font-size: 24px;
                color: #999999;
                line-height: 36px;
            }
        }
        .line_tab {
            width: 100%;
            height: 20px;
            background: #f5f5f5;
        }
    }
    .contact{
        width: 100%;
        height: 128px;
        border-radius: 20px;
        margin-bottom: 20px;
        margin-bottom: 120px;
        box-shadow: 0px 1px 20px #cccccc;
    }
    .address_left{
        float: left;
        margin: 30px 0 0 30px;
        width: 50%;
    }
    .contact_way{
        float: right;
        margin-top: 39px;
        margin-right: 50px;
        height: 50px;
        width: 96px;
        border-left: 1px solid #dddddd;
    }
    .contact_img{
        width: 44px;
        height: 44px;
        float: right;
        margin-top: 3px;
    }
    .back_main{
        float: left;
        width: 50%;
        height: 100%;
        background: #ffd11a;
    }

    .back_main img {
        width: 36px;
        height: 36px;
    }
    .back_main span {
        text-align: center;
        font-size: 32px;
        margin-left: 10px;
    }
    .introduce-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      & > .nav-introduce {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

      }
    }
    .swiper-item {
      padding: 0 10px;
    }
</style>
